<template>
	<view class="mall-page">
		<!-- 轮播图 -->
		<image class="bgImg" :src="imgBg"></image>
		<view class="shadowView"></view>
		<view class="mallTop">
			<view class="topImg">
				<view class="carousel-section">
					<swiper class="carousel" @change="swiperChange" circular indicator-dots
						indicator-color="rgba(1, 1, 1, .3)" indicator-active-color="#fff">
						<swiper-item v-for="(item, index) in bannerList" :key="index" class="carousel-item"
							@click="bannerGoToDetail(item)">
							<image :src="item.ImgUrl" mode="aspectFill" />
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="mallNav">
			<view class="navContent">
				<view class="navItem" v-for="(item,index) in navList" :key='index' @click="toUrl(item)">
					<image :src="item.ImgUrl" mode="aspectFill"></image>{{item.Name}}
				</view>
			</view>
		</view>
		<!-- 优惠券-->
		<view class="mallTips">
			<image @click="goCouponCenter()"
				src="https://mihuaguctr.jxwenxin.com/serviceplatform/static/images/feature/mallTips.png"></image>
		</view>


		<!-- 产品展示模块 -->
		<view class="goods-section">
			<template v-for="(item,index) in goodsDataList">
				<mall-title :title="item.Name" :ImgUrl="item.ImgUrl" @onCLick="handleMore(item)"></mall-title>
				<goods-list :list="item.Data" :showSubTitle="true" @navTo="navGoToDetail">
				</goods-list>
			</template>
		</view>
		<!-- 购物车 -->
		<uni-fab ref="reffab" horizontal='right' :content='content' @trigger="trigger" @fabClick="fabClick"></uni-fab>
	</view>
</template>

<script>
	import MallTitle from '@/components/mall-title.vue'
	import GoodsList from '@/components/new-goods-list.vue'
	import Config from '@/config/index.js'
	import {
		getGuideSiteList
	} from '@/api/base.js'
	import {
		getGoodsList,
		getUserProductCarItemNum,
		getShopGoodsDetail
	} from '@/api/mall.js'
	import {
		mapState
	} from 'vuex'
	import {
		forEach,
		isURl
	} from '@/utils/tools.js'
	import uniFab from '@/components/uni-fab/uni-fab.vue'

	export default {
		name: "mallPage",
		components: {
			MallTitle,
			GoodsList,
			uniFab
		},
		computed: {
			...mapState({
				siteConfig: state => state.site.siteConfig
			})
		},
		data() {
			return {
				imgBg: '',
				Bgindex: '',
				shopContent: '',
				shopId: '',
				shopBg1: '',
				shopBg2: '',
				shopBg3: '',
				shopName: '',
				newGoodsList: [],
				newGoodsMore: false,
				bannerList: [],
				navList: [],
				goodsTypeList: [],

				isChange2: 0,
				isChange: -1,
				tabCurrentIndex: 0,
				shopNavList: [{
						state: 0,
						text: '生活家居'
					},
					{
						state: 1,
						text: '特色文创'
					},
					{
						state: 2,
						text: '美食饮品'
					},
					{
						state: 3,
						text: '手机数码'
					},
					{
						state: 4,
						text: '运动户外'
					}
				],
				goodsList: [{
					Name: '12',
					ImgUrl: '../../static/images/icon104.png',
					subTitle: 'dd',
					Type: '',
					Data: '',
					number: 100,
					id: 1
				}, ],
				content: [{
						iconPath: '../../static/images/icon104.png',
						text: '首页'
					},
					{
						iconPath: '../../static/images/icon105.png',
						badge: 0,
						text: '购物车'
					},
				],
				IconOBj: {}
			};
		},
		onLoad() {
			const _this = this;
			_this.getSite();
			if (_this.$jwx && _this.$jwx.initJssdk) {
				_this.$jwx.initJssdk(function() {
					_this.$jwx.showMenuItems();
				})
			}
		},
		computed: {

			goodsDataList() {
				let goodsTypeList = this.goodsTypeList || {}
				if (goodsTypeList && goodsTypeList.length) {
					goodsTypeList = goodsTypeList.map(item => {
						const {
							Data
						} = item || {}
						console.log('goodsList Sort', Data.map(v => v.Sort))
						return {
							...item,
							Data: Data && Data.length ? Data.sort((a, b) => {
								return a.Sort - b.Sort
							}) : Data || []
						}
					})
				}
				return goodsTypeList || {}
			}

		},
		methods: {
			swiperChange(event) {
				let index = event.detail.current;
				this.currentSwiper = index;
				this.imgBg = this.bannerList[index].ImgUrl;
			},
			bannerGoToDetail(item) {
				if (isURl(item.LinkUrl)) {
					window.location.href = item.LinkUrl;
				} else {
					uni.navigateTo({
						url: item.LinkUrl
					});
				}
			},
			toUrl(item) {
				if (item.LinkUrl == null) {
					this.$api.msg("暂未开放");
				} else {
					uni.navigateTo({
						url: item.LinkUrl.replace('amp;', '&')
					});
				}
			},
			goCouponCenter() {
				uni.navigateTo({
					url: '/user_subpages/vip/coupon'
				});
			},
			// 跳转更多页面
			handleMore(item) {
				const {
					Type,
					navActive
				} = item
				const {
					Children
				} = this.shopContent
				const activeData = Children && Children.length ? Children.find(v => v.LinkUrl === navActive) : null
				const {
					Name
				} = activeData || {}
				let url = '/mall_subpages/goods-list-search/goods-list-search'
				if (Type) {
					url += `?type=${item.Type}`
				}
				if (navActive) {
					url += url.includes('?') ? `&BusinessId=${navActive}` : `?BusinessId=${navActive}`
				}
				if (Name) {
					url += url.includes('?') ? `&Title=${Name}` : `?Title=${Name}`
				}
				uni.navigateTo({
					url
				});
			},
			// 跳转商品详情页
			navGoToDetail(e) {
				uni.navigateTo({
					url: `/mall_subpages/goods-detail/goods-detail?id=${e.Id}&type=${e.Type}`
				});
			},
			trigger(e) {
				if (e.item.text === '首页') {
					uni.switchTab({
						url: '/pages/index/index'
					});
				} else if (e.item.text === '购物车') {
					uni.navigateTo({
						url: `/mall_subpages/cart/cart`
					});
				};
				this.$refs.reffab.close();
			},
			fabClick(e) {
				if (!this.$refs.reffab.isShow) {
					this.getCartListNumber();
				}
			},
			changeNav2(index, id) {
				this.Bgindex = index;
				if (index != this.isChange2) {
					this.isChange2 = index;
					this.shopId = id;
					this.getShopGoodsList();
				} else {}
			},
			goShop(id) {
				uni.navigateTo({
					url: `/mall_subpages/shop/shopIndex?id=${id}`
				});
			},
			goGoodsDetail(item) {
				uni.navigateTo({
					url: `/mall_subpages/goods-detail/goods-detail?id=${item.Id}&type=${item.Type}`
				});
			},
			onSlideChangeEnd() {
				console.log('!!')
			},
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			changeNav(index) {
				if (index != this.isChange) {
					this.isChange = index;
				} else {}
			},
			// 跳转商品搜素页
			navToSearchList(item) {
				if (item.LinkUrl) {
					uni.navigateTo({
						url: item.LinkUrl.replace('amp;', '&')
					});
				}
			},
			// 获取购物车数量
			async getCartListNumber() {
				try {
					const {
						Data
					} = await getUserProductCarItemNum();
					this.content[1].badge = Data;
				} catch (e) {
					console.log("获取购物车数量失败:[" + e.ErrorCode + "]" + e.Msg);
				}
			},
			// 获取站点配置信息
			async getSite() {
				try {
					const {
						Data
					} = await getGuideSiteList({
						ParentId: Config.site.mall_id,
						layers: 2,
					});
					//banner列表
					const _bannerObj = Data.find(item => item.Id === Config.site.mall_banner_id);
					if (_bannerObj) {
						this.bannerList = _bannerObj.Children;
						this.imgBg = _bannerObj.Children[0].ImgUrl;
					}
					//导航栏
					const _navObj = Data.find(item => item.Id === Config.site.mall_nav_id);
					if (_navObj) {
						this.navList = _navObj.Children;
					}
					//精选店铺
					this.shopContent = Data.find(item => item.Id === Config.site.shop_Icon_id);
					this.shopContent.Name = "";
					if (this.shopContent.ImgUrl == null) {
						this.shopContent.ImgUrl = '../../static/images/shopCheck.png';
					}
					this.shopId = this.shopContent.Children[0].LinkUrl;
					this.shopBg1 = this.shopContent.Children[0].ImgUrl;
					this.shopBg2 = this.shopContent.Children[1].ImgUrl;
					this.shopBg3 = this.shopContent.Children[2].ImgUrl;
					this.getShopGoodsList();

					//推荐产品
					const goodsTypeObj = Data.find(item => item.Id === Config.site.mall_Icon_id);
					if (goodsTypeObj) {
						console.log("goodsTypeObj=" + goodsTypeObj);

						//换成配置文件
						const typeEnums = {
							3346: 2,
						};

						Object.keys(Config.site.mall_Icon_typeEnums).forEach((key) => {
							const row = goodsTypeObj.Children.find(listItem => listItem.Id * 1 === key * 1);
							if (row) {
								console.log("row.Name=" + row.Name);
								this.goodsTypeList.push({
									Id: row.Id,
									Type: Config.site.mall_Icon_typeEnums[key],
									Name: '',
									ImgUrl: row.ImgUrl,
									Data: []
								});
								this.getMallGoodsList(Config.site.mall_Icon_typeEnums[key]);
							}
						})

					}
				} catch (e) {}
			},
			async getShopGoodsList() {
				try {
					const {
						Data
					} = await getShopGoodsDetail({
						BusinessId: this.shopId
					});
					this.newGoodsMore = Data.length > 3
					if (Data.length > 3) {
						this.newGoodsList = Data.slice(0, 3);
					} else {
						this.newGoodsList = Data || [];
					}
					this.shopName = Data[0].ShopName;
					this.shopBg = this.shopBg1;
				} catch (e) {}
			},
			//获取商品列表
			async getMallGoodsList(Type) {
				console.log("getMallGoodsList.Type=" + Type);
				try {
					const {
						Data
					} = await getGoodsList({
						IsRecommend: 1,
						TypeId: Type,
						size: 4
					});
					const listItem = this.goodsTypeList.find(item => item.Type === Type);
					console.log("listItem=" + listItem);
					if (listItem) {
						listItem.Data = Data;
					}
				} catch (e) {}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.mall-page {
		position: relative;
		background: #e9e9e9;

		.bgImg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 400rpx;
			opacity: .7;

		}

		.shadowView {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 400rpx;
			background-color: #333;
			opacity: .7;
		}

		.mallTop {
			width: 100%;
			height: 400rpx;
			// background-image: url(../../static/images/topBg.png);
			background-size: 100%;
			padding-top: 30rpx;

			.topSearch {
				width: 100%;
				height: 100rpx;
				display: flex;

				.searchLeft {
					width: 75%;
					margin-left: 5%;
					height: 60rpx;
					background-color: rgba(150, 149, 149, .5);
					border-radius: 25rpx;

					display: flex;
					align-items: center;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-left: 5%;
						margin-right: 5%;
					}

					input {
						font-size: 28rpx;
					}
				}

				.searchRight {
					width: 12%;
					margin-left: 5%;
					height: 60rpx;
					background-color: rgba(150, 149, 149, .5);
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: rgb(45, 43, 43);
				}


			}

			.topImg {
				width: 94%;
				height: 360rpx;
				position: relative;
				bottom: 4rpx;
				left: 3%;
				z-index: 9;

				.carousel-section {
					height: 100%;
				}

				image {
					width: 100%;
					height: 100%;

				}
			}
		}

		.shopArea {
			background-color: #F8F8F8;
			padding: 20rpx 5%;
			margin-top: 10rpx;

			.shopTitle {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.seeTitle {
					width: 70%;
					display: flex;
					// align-items:flex-end;
					align-items: center;
					justify-content: flex-end;
					font-size: 30rpx;
					color: #333;

					.titleImg {
						width: 200rpx;
						height: 50rpx;
						margin-right: 3%;

					}

				}

				.seeMore {
					display: flex;
					align-items: center;
					color: gray;
					font-size: 24rpx;

					image {
						width: 20rpx;
						margin-left: 20rpx;
					}
				}
			}

			.navBgIcon {
				position: absolute;
				width: 40rpx;
				right: -20rpx;
				top: -5rpx // float:right;
			}

			.shopNav {


				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.navName {
					color: gray;
					font-size: 24rpx;
					position: relative;
				}

				.activeNav {
					color: #111;

					&::after {
						content: '';
						display: block;
						width: 80%;
						height: 6rpx;
						border-radius: 2rpx;
						background: #eb8a3e;
						position: absolute;
						bottom: -12rpx;
						left: 10%;
					}

					// background-image: url(../../static/images/navBgIcon.png);
					// background-size: 100% 100%;
				}
			}

			.shopDetail {
				.detailTitle {
					position: relative;
					color: snow;
					font-weight: bold;
					font-size: 40rpx;
					padding: 20rpx 0 0 40rpx;
					width: 100%;
					height: 150rpx;
					// background-image: url(../../static/images/shopNameBg.png);
					// background-size: 100% 100%;
					z-index: 2;

					.titleImgBg {
						width: 100%;
						position: absolute;
					}

					.shopBgImg {
						z-index: 1;
						width: 100%;
						height: 150rpx;
						position: absolute;
						top: 0;
						left: 0;
						border-radius: 10rpx;
					}
				}

				.detailList {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					&-more {
						width: 100%;
						display: flex;
						justify-content: flex-end;
						padding: 20rpx 0 0;

						.seeMore {
							display: flex;
							align-items: center;
							color: gray;
							font-size: 24rpx;

							image {
								width: 20rpx;
								margin-left: 20rpx;
							}
						}
					}

					.Newgoods {
						margin-top: 20rpx;
						display: flex;
						flex-direction: column;
						align-items: flex-start;

						.goodsImg {
							background-color: #ccc;
							border-radius: 10rpx;

							image {
								width: 200rpx;
								height: 200rpx;
								border-radius: 10rpx;
							}
						}

						.name {
							font-size: 30rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 150rpx;

							color: #363636;
							margin-top: 10rpx;
							margin-bottom: 8rpx;
						}

						.sub {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 150rpx;
							color: gray;
							font-size: 24rpx;
						}

						.price {
							color: #e07b2b;
							font-weight: bold;
						}
					}
				}

			}


		}

		.mallNav {
			width: 100%;
			padding: 3% 3%;
			background-color: #FFFFFF;

			.moreNav {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding-right: 5%;
				margin-bottom: 20rpx;
				color: #111;
				font-size: 22rpx;

				image {
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
			}

			.navContent {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.navItem {
					width: 25%;
					height: 150rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					font-size: 28rpx;
					color: #111;

					image {
						width: 60%;
						height: 80rpx;
					}
				}
			}
		}

		.mallTips {
			padding: 3%;
			height: 200rpx;
			width: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.mallActive {
			padding: 3%;
			height: 200rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 47%;
				height: 100%;
			}
		}

		.goodsArr {
			padding: 3%;

			.goodsTitle {
				display: flex;
				align-items: cneter;
				justify-content: space-between;
				height: 180rpx;

				.titleLeft {
					display: flex;
					width: 70%;

					align-items: center;

					image {
						width: 40%;
						height: 52rpx;
					}

					.timeView {
						margin-left: 5%;
						width: 45%;
						height: 30%;
						border: rgb(230, 124, 55) solid 2rpx;
						border-radius: 15rpx 15rpx 15rpx 0;
						display: flex;

						.codeName {
							width: 50%;
							font-size: 24rpx;
							color: rgb(230, 124, 55);
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.timeCode {

							width: 50%;
							background-color: rgb(230, 124, 55);
							// border-radius: 0 15rpx 15rpx 0;
							color: snow;
							font-size: 24rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}

				.titleRight {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					color: gray;
					font-size: 22rpx;

					image {
						width: 20rpx;
						height: 20rpx;
						margin-left: 10rpx;
					}
				}
			}

			.goodsContent {
				display: flex;
				align-items: center;
				justify-content: space-around;

				.goodsItem {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					width: 30%;

					image {
						width: 100%;
						height: 200rpx;
					}

					.goodsPrice {
						display: flex;
						align-items: center;
						margin-top: 20rpx;

						.truePrice {
							display: flex;
							align-items: center;

							color: rgb(230, 124, 55);
							font-size: 35rpx;
							font-weight: bold;

							image {
								width: 22rpx;
								height: 20rpx;
							}
						}

						.fakePrice {
							border: rgb(147, 147, 147) solid 6rpx;
							font-size: 28rpx;
							color: rgb(147, 147, 147);
							border-radius: 20rpx;
							margin-left: 5%;
							padding: 0 5%;
						}

					}

					.number {
						color: rgb(147, 147, 147);
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}
		}

		.shopArr {
			padding: 3%;

			.shopArrTitle {
				height: 180rpx;
				width: 70%;
				display: flex;
				align-items: center;

				image {
					width: 40%;
					height: 40%;
				}
			}

			.shopArrNav {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.navItem {
					color: gray;
					font-size: 24rpx;
				}

				.activeNav {
					color: snow;
				}
			}

		}
	}

	/* 轮播图 */
	.mall-page /deep/ .uni-swiper-dot {
		width: 20rpx;
		height: 10rpx;
		border-radius: 50rpx;
	}

	.mall-page /deep/ .uni-swiper-dots-horizontal {
		bottom: 30rpx;

		.uni-swiper-dot {}

		.uni-swiper-dot-active {
			background-color: #e07b2b !important;
		}
	}

	.carousel {
		width: 100%;
		height: 100%;
		background-color: transparent;
		border-radius: 20rpx;

		/deep/ .uni-swiper-wrapper {
			.uni-swiper-dots {
				.uni-swiper-dots {
					background-color: red !important;
				}
			}
		}

		.carousel-item {
			width: 100%;
			height: 100%;
			overflow: hidden;
			background: #c9c9c9;
			border-radius: 20rpx;

			.bannerBg {
				position: absolute;
				width: 500rpx !important;
				height: 800rpx !important;
				top: -100rpx;
				left: 0;
				z-index: 99999;
			}
		}

		image {
			width: 100%;
			height: 100%;
		}

	}

	/* 轮播图 end */
	.nav-top-bg {
		position: absolute;
		margin-top: -18rpx;
		width: 100%;
		height: 20rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
	}

	.goods-section {
		padding: 30rpx;
		background-color: #FFFFFF;

		/deep/ .mall-title {
			margin: 0 !important;
			width: 100%;

		}
	}
</style>